<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
     * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none
        }

        a {
            text-decoration: none;
        }

        .wrap {
            width: 800px;
            margin: 50px auto;
            /* border: 1px solid #000; */
        }

        .wrap .top {
            overflow: hidden;
        }

        .wrap .top .left {
            float: left;
        }

        .wrap .top .right {
            float: right;
        }

        .title {
            margin-top: 20px;
        }

        .title>li,
        .content>li {
            display: flex;
        }

        .title>li>span,
        .content>li>span {
            flex: 1;
            flex-shrink: 0;
            text-align: center;
            border: 1px solid #000;
        }
         /* 遮罩层 */
         .shadow {
            position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background-color: rgba(0, 0, 0, 0.4);
            display: none;
        }

        .detailBox {
            position: absolute;
            width: 400px;
            height: 300px;
            padding-left: 20px;
            background-color: #fff;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .detailBox p {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="top">
            <div class="left">
                <input class="searchCon" type="text">
                <input class="searchBtn" type="button" value="查询">
            </div>
            <div class="right">
                编号<input type="radio" checked name="orderType" value="id">
                用户名<input type="radio" name="orderType" value="user_name">
                手机号<input type="radio" name="orderType" value="user_phone">
                |
                升序<input type="radio" checked name="order" value="asc" id="">
                降序<input type="radio" name="order" value="desc" id="">
            </div>
        </div>
        <ul class="title">
            <li>
                <span>编号</span>
                <span>用户ID</span>
                <span>用户名</span>
                <span>用户密码</span>
                <span>手机号</span>
                <span>编辑</span>
                <span>删除</span>
            </li>
        </ul>
        <ul class="content">
            <!-- <li>
                <span>1</span>
                <span>my_www</span>
                <span>www</span>
                <span>123123</span>
                <span>12345678901</span>
                <span>编辑</span>
                <span>删除</span>
            </li> -->
        </ul>
    </div>
    <div class="shadow">
            <div class="detailBox">
                <p>编&emsp;号：<span class="editId"></span></p>
                <p>用户ID：<span class="editUserId"></span></p>
                <p>用户名: <input class="editUser" type="text"> </p>
                <p>密&emsp;码:<input class="editPwd" type="text"></p>
                <p>手机号:<input class="editPhone" type="text"></p>
                <p>
                    <input class="editSub" type="submit" value="确定">
                    <input class="editCan" type="reset" value="取消">
                </p>
            </div>
        </div>
</body>
<script src="index.js" type="module"></script>
<!-- <script>
var order="id"
var type="asc"
var con=""
var conInp=document.getElementsByClassName("searchCon")[0]
var orderInplist=document.getElementsByName("orderType")
var typeInplist=document.getElementsByName("order")
var content=document.getElementsByClassName("content")[0]
var search=document.getElementsByClassName("searchBtn")[0]
var shadow=document.getElementsByClassName("shadow")[0]
var editId=document.getElementsByClassName("editId")[0]
var editUserId=document.getElementsByClassName("editUserId")[0]
var editUser=document.getElementsByClassName("editUser")[0]
var editPwd=document.getElementsByClassName("editPwd")[0]
var editPhone=document.getElementsByClassName("editPhone")[0]
var editSub=document.getElementsByClassName("editSub")[0]
var editCan=document.getElementsByClassName("editCan")[0]
conInp.onchange=function(){
    con=conInp.value
}
for(var i=0;i<orderInplist.length;i++){
    orderInplist[i].onchange=function(){
        order=this.value
        console.log(order)
        updatepage()
    }
}
for(var i=0;i<typeInplist.length;i++){
    typeInplist[i].onchange=function(){
        type=this.value
        console.log(type)
        updatepage()
    }
}
search.onclick=function(){
    updatepage()
}
updatepage()

function updatepage(){
    userlist.showdate(con,order,type).then(function(result){
    var html=""
    result.forEach(item => {
            html +=`<li>
                    <span>${item.id}</span>
                    <span>${item.id}${item.user_name}</span>
                    <span>${item.user_name}</span>
                    <span>${item.user_pwd}</span>
                    <span>${item.user_phone}</span>
                    <span edit_id=${item.id} class="edit">编辑</span>
                    <span delete_id=${item.id} class="delete">删除</span>
                </li>`
        });
    content.innerHTML=html 
    active()
})
}

// function showdate(con,order,type,fn){
//     var html=""
//     var xhr=new XMLHttpRequest()
//     xhr.open("get",`index.php?con=${con}&&order=${order}&&type=${type}`)
//     xhr.send()
//     xhr.onload=function(){
//         var result=JSON.parse(xhr.responseText)
//         result.forEach(item => {
//             html +=`<li>
//                     <span>${item.id}</span>
//                     <span>${item.id}${item.user_name}</span>
//                     <span>${item.user_name}</span>
//                     <span>${item.user_pwd}</span>
//                     <span>${item.user_phone}</span>
//                     <span edit_id=${item.id} class="edit">编辑</span>
//                     <span delete_id=${item.id} class="delete">删除</span>
//                 </li>`
//         });
//     content.innerHTML=html
//     if(fn){
//         fn()
//     }
//     }
// }

function active(){
    var editlist=document.getElementsByClassName("edit")
    var deletelist=document.getElementsByClassName("delete")
    // 删除
    for(var i=0;i<deletelist.length;i++){
         deletelist[i].onclick=function(){
            var id=this.getAttribute("delete_id")
            this.parentElement.remove()
            userlist.del(id).then(function(a){
                alert(a.status)
            })
         }
        // deletelist[i].onclick=function(){
        //     var id=this.getAttribute("delete_id")
        //     this.parentElement.remove()
        //     $.get({
        //         url:"delete.php",
        //         type:"get",
        //         dataType:"json",
        //         data:{
        //             id:id
        //         },
        //         callback:function(a){
        //           alert(a.status)
        //         }
        //     })
        // }
    }
    for(var i=0;i<editlist.length;i++){
        editlist[i].onclick=function(){
          shadow.style.display="block"
          var id=this.getAttribute("edit_id")
          userlist.edit(id).then(function(e){
            editId.innerHTML=e[0].id
            editUser.value=e[0].user_name
            editPwd.value=e[0].user_pwd
            editPhone.value=e[0].user_phone
          })
        editSub.onclick=function(){
            Promise.all([userlist.isExituserName(editUser.value),userlist.isExituserPhone(editPhone.value)]).then(function(e){
                console.log(e)
                if(e.every(item=>item.status==true)){
                    var user_name=editUser.value
                    var user_pwd=editPwd.value
                    var user_phone=editPhone.value
                    userlist.updateuserinfo(user_name,user_pwd,user_phone,id).then(function(e){
                        console.log(e)
                    })
                }
                else{
                    var res=e.find(item=>item.status==false)
                    alert(res.msg)
                }
            })
        }
        }
    }
}
</script> -->
</html>